<template>
	<div class="item m-b-20" @click="secondHandClick(item)">
		<div class="item-title" v-text="data.usecTitle"></div>
		<div class="item-price">
			<span class="font-12">￥</span>{{data.usecPrice}}</div>
		<div class="item-image">
			<img class="big-image" :src="data.filesList[0].filesPath">
			<div class="little-image">
				<img v-if="data.filesList[1].filesPath" :src="data.filesList[1].filesPath">
				<img v-if="data.filesList[2].filesPath" :src="data.filesList[2].filesPath">
			</div>
		</div>
		<div class="user-desc">
			<img class="user-img" :src="data.icon || '../../../static/images/user/moren.png '">
			<div class="user">
				<span class="font-c-41">{{data.periNickname || '小区住户' }}</span>
				<span class="font-c-7f">{{data.pageView}}人预览</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'goods-item',
		props: {
			data: Object
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/scss/_common.scss';

	.item {
		border-radius: ws(10);
		box-shadow: $shaow-main;
		overflow: hidden;
		padding: ws(15);
		background-color: #fff;

		.item-title {
			margin: auto;
			margin-bottom: ws(17/2);
			width: ws(435/2);
			text-align: center;
			@include one-line
		}

		.item-price {
			text-align: center;
			margin-bottom: ws(30/2);
			font-size: ws(20);
			color: #df204d;
			line-height: ws(20);
		}

		.item-image {
			position: relative;
			z-index: 1;
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: ws(368/2);
			overflow: hidden;

			image {
				object-fit: cover;
			}

			.big-image {
				width: ws(420/2);
				height: ws(368/2);
				margin-right: ws(1);
			}

			.little-image {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				>image {
					width: 100%;
					height: ws(183/2);
				}
			}
		}

		.user-desc {
			position: relative;
			z-index: 2;
			margin-top: ws(-15);
			display: flex;
			align-items: flex-end;

			.user-img {
				margin-left: ws(15);
				margin-right: ws(10);
				width: ws(86/2);
				height: ws(86/2);
				border-radius: 50%;
				box-shadow: 0 0 0 ws(2) #fff;
			}

			.user {
				flex: 1;
				display: flex;
				justify-content: space-between;
				font-size: ws(26/2);
			}
		}
	}
</style>
